<template>
    <div class="show-time">
        <slot :year="year" :month="month" :day="day" :hour="hour" :min="min" :sec="sec">
            {{ year }}-{{ month }}-{{ day }} {{ hour }}:{{ min }}:{{ sec }}
        </slot>
    </div>
</template>

<script>
export default {
    // exposes:[""],
    data() {
        return {
            now: new Date(),
            timer: null,
        }
    },
    methods: {
        update() {
            clearInterval(this.timer);
            this.timer = setInterval(() => {
                this.now = new Date();
            }, 1000)
        },
        stop() {
            clearInterval(this.timer);
        }
    },
    computed: {
        year() {
            return this.now.getFullYear();
        },
        month() {
            // 月份参数: 0 - 11 
            // 实际月份 = 月份参数 + 1
            var month = this.now.getMonth() + 1
            return month.toString().padStart(2, "0");
        },
        day() {
            var day = this.now.getDate()
            return day.toString().padStart(2, "0");
        },
        hour() {
            var hour = this.now.getHours();
            return hour.toString().padStart(2, "0");
        },
        min() {
            var min = this.now.getMinutes();
            return min.toString().padStart(2, "0");
        },
        sec() {
            var sec = this.now.getSeconds();
            return sec.toString().padStart(2, "0");
        },
        dateOption() {
            var year = this.now.getFullYear();
            var month = this.now.getMonth() + 1;
            var day = this.now.getDate();
            var hour = this.now.getHours();
            var min = this.now.getMinutes();
            var sec = this.now.getSeconds();
            return {
                year: year,
                month: month.toString().padStart(2, "0"),
                day: day.toString().padStart(2, "0"),
                hour: hour.toString().padStart(2, "0"),
                min: min.toString().padStart(2, "0"),
                sec: sec.toString().padStart(2, "0"),
            }
        }
    },
    mounted() {
        this.update();
    },

    // vue3 生命周期钩子 (销毁 => 卸载  )
    // 卸载前
    beforeUnmount() {

    },
    // 卸载后
    unmounted() {
        this.stop();
    }
}
</script>

<style scoped>
.unit {
    display: inline-block;
    /* margin: 0 4px; */
    color: #1989fa;
}

.colon {
    display: inline-block;
    margin: 0 4px;
    color: #1989fa;
}

.block {
    display: inline-block;
    min-width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #1989fa;
}
</style>